<template>
	<el-upload
		v-model:file-list="list"
		:action="action"
		:multiple="multiple"
		:on-change="onChange"
		:on-preview="handlePreview"
		:on-remove="handleRemove"
		:before-remove="beforeRemove"
		:limit="limit"
		:show-file-list="showFileList"
		:on-exceed="handleExceed"
		:accept="accept"
		:headers="headers"
		class="upload-box"
		listType="text"
	>
		<template v-if="listType === 'image' && !disabled">
			<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
		</template>
		<slot name="uploadAction" v-else> </slot>
		<template #tip>
			<view class="el-upload__tip" v-if="tip">{{ tip }}</view>
		</template>
	</el-upload>
	<scroll-view
		scroll-x
		class="scrollbar-none flie-box w-full"
		v-if="list.length > 0 && listType === 'image'"
	>
		<view class="image-box w-full">
			<view v-for="(image, index) in list" class="item items-center">
				<van-image
					:src="image.url"
					class="item"
					width="100"
					height="100"
					cover
					@click="handlePreview(image)"
				/>
				<el-icon
					class="icon"
					@click="remove(index)"
					color="#fff"
					v-if="!disabled"
				>
					<Close />
				</el-icon>
			</view>
		</view>
	</scroll-view>
</template>
<script setup>
import { TOKEN_KEY } from "@/enums/cacheEnum";
import { Plus, Close } from "@element-plus/icons-vue";
import { preview } from "@/utils/index";
const props = defineProps({
	// 上传的文件类型
	accept: {
		type: String,
		default: "*",
	},
	// 是否可多张
	multiple: {
		type: Boolean,
		default: true,
	},
	// 是否显示文件列表
	showFileList: {
		type: Boolean,
		default: false,
	},
	// 文件展示样式
	listType: {
		type: String,
		defult: "",
	},
	// 最大限制
	limit: {
		type: Number,
		default: 3,
	},
	// 提示
	tip: {
		type: String,
		default: "",
	},
	// 上传的文件回显
	fileList: {
		type: String || Array,
		default: "",
	},
	// 是否禁用
	disabled: {
		type: Boolean,
		default: false,
	},
});
const list = ref([]);
// watch(
// 	() => props.fileList,
// 	() => {
// 		// 回显
// 		list.value = []
// 		const array = props.fileList.length > 0 ? props.fileList.split(",") : [];
// 		array.map((item, index) => {
// 			list.value.push({
// 				uid: 0 - index,
// 				name: item,
// 				status: "success",
// 				url: item,
// 			});
// 		});
// 	},
// );
// 回显
const array = props.fileList.length > 0 ? props.fileList.split(",") : [];
array.map((item, index) => {
	list.value.push({
		uid: 0 - index,
		name: item,
		status: "success",
		url: item,
	});
});

const emit = defineEmits(["update"]);
const action = ref(appConfig.apiUrl + "/dev/file/uploadDynamicReturnUrl");
const headers = ref({
	token: cache.get(TOKEN_KEY),
});

// 删除
const remove = (index) => {
	list.value.splice(index, 1);
	emit(
		"update",
		list.value.map((e) => {
			return { url: e.url, name: getFileName(e.url) };
		}),
	);
};
const handleRemove = () => {};
// 点击文件列表中已上传的文件时的钩子
const handlePreview = async (file) => {
	preview(file.url || file);
};
const beforeRemove = () => {};
const handleExceed = () => {};
const onChange = (info) => {
	if (info.status === "ready") {
		// loading.value = true;
		return;
	}
	if (info.status === "success" || info.status === "removed") {
		let result;
		result = [];
		for (let a = 0; a < list.value.length; a++) {
			const file = list.value[a];
			if (file && !file.response && file.url) {
				result.push({
					url: file.url,
					name: getFileName(file.url),
				});
			} else if (file && file.response && file.response.code === 200) {
				const url = file.response.data;
				result.push({
					url: url,
					name: getFileName(url),
				});
				list.value[a].url = url;
			}
		}

		if (result.length > 0) {
			emit("update", result);
		}
	}
	if (info.status === "error") {
		// loading.value = false;
		message.error("upload error");
	}
};
// 获取文件名称
const getFileName = (url) => {
	return url.slice(url.lastIndexOf("/") + 1);
};
</script>
<style lang="scss" scoped>
.image-box {
	display: flex;
	flex-wrap: nowrap;
	.item {
		flex: 0 0 100px;
		margin-right: 20rpx;
		position: relative;
		.icon {
			position: absolute;
			top: 0%;
			right: 20rpx;
			z-index: 999;
			background-color: #ee0a24;
		}
	}
}
.flie-box {
	width: calc(100% - 200rpx);
	margin-left: 20rpx;
}
.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	flex: 0 0 100px;
	text-align: center;
	border: 1rpx dashed $uni-border-color;
}
</style>
